<template>
    <page-header-wrapper :title="false">
      <a-card>
        <template slot="title">
          <a-row :style="{ height: '40px', lineHeight: '40px' }">
            <a-col :span="12">
              <a-carousel :dots="false" autoplay>
                <router-link v-for="item in msgList" :key="item.id" :to="{ name: 'MessageDetail', params: { id: item.id } }">
                  <a-alert showIcon type="info">
                    <template slot="message">
                      <ellipsis :length="50">【{{msgOpts[item.msg_type]}}】{{item.title}}</ellipsis>
                    </template>
                  </a-alert>
                </router-link>
              </a-carousel>
            </a-col>
          </a-row>
        </template>
        <template slot="extra">
          <a-button size="small" type="primary" @click="toMore">业绩详情</a-button>
        </template>
        <a-row :gutter="40">
          <a-col :span="16">
            <a-row :gutter="[20,20]">
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="getUnpaidList('three')">
                  <div class="title">{{indexData.srwkd}}</div>
                  <div class="desc">
                    3天未开单名单
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="getUnpaidList('five')">
                  <div class="title">{{indexData.wrwkd}}</div>
                  <div class="desc">
                    5天未开单名单
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="getUnpaidList('ten')">
                  <div class="title">{{indexData.trwkd}}</div>
                  <div class="desc">
                    10天未开单名单
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="callModal">
                  <div class="title" v-if="indexData.todayZts != 0">{{(indexData.todayZts / 60).toFixed(2)}}分钟</div>
                  <div class="title" v-else>{{indexData.todayZts}}分钟</div>
                  <div class="desc">
                    今日总通时
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" data-modules="5" @click="$router.push({ path: '/wechat' })">
                  <div class="title">{{indexData.wx_count}}</div>
                  <div class="desc">
                    今日微信添加量
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="onHandleTabs(6)">
                  <div class="title">{{indexData.contractDsh}}</div>
                  <div class="desc">
                    审核合同量
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" @click="onHandleTabs('lx')">
                  <div class="title">{{indexData.todayPjlx}}/{{indexData.todayZlx}}</div>
                  <div class="desc">
                    今日平均领新/今日总领新
                  </div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="l-work-item cursor" :class="undone" data-modules="8" @click="$router.push({ name: 'MemberView' })">
                  <div class="title" style="font-size: 24px;">大数据中心</div>
                  <div class="desc">
                    查看组内实时数据
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row :gutter="[20,20]">
              <a-col :span="24">
                <div style="height: 100px; cursor: pointer;" @click="yjModal">
                  <p class="font40">{{indexData.todayYj}}/{{indexData.thisMonthYj}}/{{indexData.thisMonthPjYj}}</p>
                  <span>今日业绩/当月业绩/平均业绩</span>
                </div>
              </a-col>
              <a-col :span="24">
                <a-row :gutter="20">
                  <a-col :span="8" data-modules="7" @click="$router.push({ path: '/search' })">
                    <a-icon class="font50" type="search" />
                    <p>快速查询</p>
                  </a-col>
                  <a-col :span="8" data-modules="9" @click="$router.push({ name: 'MemberList' })">
                    <a-icon class="font50" type="team" />
                    <p>组员列表</p>
                  </a-col>
                  <a-col :span="8" data-modules="10" @click="$router.push({ name: 'ScheduleUserList' })">
                    <a-icon class="font50" type="calendar" />
                    <p>排班设置</p>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>
      <a-card
        :title="cardTitle"
        :style="{ marginTop: '20px' }"
        v-show="visible"
      >
        <template #extra>
          <a-button size="small" type="primary" @click="$router.push({ name: 'MemberList' })">组员详情</a-button>
        </template>
<!--        <div slot="extra">-->
<!--          <div v-if="mds == 1 || mds == 2 || mds == 3" class="l-work-button-group">-->
<!--            <a-button type="primary" ghost>未上报</a-button>-->
<!--          </div>-->
<!--          <div v-if="mds == 5" class="l-work-button-group">-->
<!--            <a-button type="primary" ghost>加油站最后5名</a-button>-->
<!--            <a-button type="primary" ghost>未完成工作内容</a-button>-->
<!--          </div>-->
<!--          <div v-if="mds == 9" class="l-work-button-group">-->
<!--            <a-button type="primary" ghost>业绩低于1万</a-button>-->
<!--            <a-button type="primary" ghost>业绩低于1.5万</a-button>-->
<!--            <a-button type="primary" ghost>业绩低于2万</a-button>-->
<!--            <a-button type="primary" ghost>同期业绩下降</a-button>-->
<!--            <a-button type="primary" ghost>同期</a-button>-->
<!--          </div>-->
<!--        </div>-->
        <s-table
          ref="wkdTable"
          :row-key="(record) => record.uid"
          :columns="wkdColumns"
          :data="wkdData"
        >
        </s-table>
      </a-card>
      <a-modal
        title="组员业绩"
        v-model="perfModal"
        :footer="null"
      >
        <a-input-search v-model="queryParam2['adviser_name']" placeholder="输入要查看的顾问姓名" enter-button @search="onSearch" />
        <p></p>
        <s-table
          bordered
          ref="table"
          size="small"
          :row-key="(record) => record.id"
          :columns="yjColumns"
          :data="yjData"
        >
          <template slot="jr_yj" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
        </s-table>
      </a-modal>
      <a-modal
        title="组员通时"
        v-model="tsModal"
        :footer="null"
      >
        <a-tabs @change="onTabTs">
          <a-tab-pane key="1" tab="今日"></a-tab-pane>
          <a-tab-pane key="2" tab="昨日"></a-tab-pane>
        </a-tabs>
        <a-input-search v-model="queryParam2['adviser_name']" placeholder="输入要查看的顾问姓名" enter-button @search="onSearch" />
        <p></p>
        <s-table
          bordered
          size="small"
          ref="table1"
          :row-key="(record) => record.uid"
          :columns="callColumns"
          :data="callData"
        >
          <template slot="ts" slot-scope="text">
            <a-tag color="red">{{(text/60).toFixed(2)}}分钟</a-tag>
          </template>
        </s-table>
      </a-modal>
      <a-modal
        title="领新统计"
        v-model="lxModal"
        :footer="null"
      >
        <a-input-search v-model="queryParam2['filter[adviser_name]']" placeholder="输入要查看的顾问姓名" enter-button @search="onSearch" />
        <p></p>
        <s-table
          bordered
          size="small"
          ref="table"
          :row-key="(record,index) => index"
          :columns="lxColumns"
          :data="lxData"
        >
          <template slot="num" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
        </s-table>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { getCallList, getIndex, getLxList, getUnpaidAdviser, getYjList } from '@/api/leader'
  import col from '@/columns/leader'
  import { getMessage } from '@/api/message'
  import Ellipsis from '@/components/Ellipsis/Ellipsis'
  const callColumns = col.call
  const yjColumns = col.yj
  const lxColumns = col.lx
  const wkdColumns = col.wkd
  export default {
    components: {
      STable,
      Ellipsis
    },
    name: 'LeaderIndex',
    data () {
      return {
        visible: false,
        tsModal: false,
        lxModal: false,
        perfModal: false,
        cardTitle: '',
        mds: '',
        undone: 'undone',
        done: 'done',
        callColumns,
        lxColumns,
        yjColumns,
        wkdColumns,
        callData: parameters => {
          return getCallList(Object.assign(parameters, this.queryParam2)).then(res => {
            return res.result
          })
        },
        yjData: parameters => {
          return getYjList(Object.assign(parameters, this.queryParam2)).then(res => {
            return res.result
          })
        },
        lxData: parameters => {
          return getLxList(Object.assign(parameters, this.queryParam2)).then(res => {
            return res.result
          })
        },
        wkdData: parameters => {
          return getUnpaidAdviser(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        indexData: {},
        loading: true,
        queryParam2: {},
        queryParam: {},
        msgList: [],
        msgOpts: {}
      }
    },
    created () {
      this.queryParam['filter[type]'] = 'three'
      this.getIndexData()
      this.getMsg()
    },
    methods: {
      getIndexData () {
        this.loading = true
        getIndex().then(res => {
          if (res.status === 0) {
            this.indexData = res.result
            this.loading = false
          }
        })
      },
      yjModal () {
        this.queryParam2 = {}
        this.perfModal = true
      },
      callModal () {
        this.queryParam2 = {}
        this.tsModal = true
      },
      onTabTs (key) {
        this.queryParam2['filter[type]'] = key
        this.$refs.table1.refresh(true)
      },
      getUnpaidList (num) {
        if (num === 'three') {
          this.cardTitle = '3天未开单'
          this.queryParam['filter[type]'] = 'three'
          this.visible = true
          this.$refs.wkdTable.refresh(true)
        }
        if (num === 'five') {
          this.cardTitle = '5天未开单'
          this.queryParam['filter[type]'] = 'five'
          this.visible = true
          this.$refs.wkdTable.refresh(true)
        }
        if (num === 'ten') {
          this.cardTitle = '10天未开单'
          this.queryParam['filter[type]'] = 'ten'
          this.visible = true
          this.$refs.wkdTable.refresh(true)
        }
      },
      onHandleTabs (event) {
        if (event === 'lx') {
          this.queryParam2 = {}
          this.lxModal = true
        }
        if (event === 6) {
          this.$router.push({ name: 'ContractList' })
        }
        if (event === '10') {
          this.$router.push({ path: '/schedule' })
        }
      },
      onSearch (value) {
        this.$refs.table1.refresh(true)
      },
      openPerformanceModal () {
        this.tsModal = true
      },
      toMore () {
        this.$router.push({ path: '/member' })
      },
      getMsg () {
        getMessage().then(res => {
          this.msgList = res.result.data
          this.msgOpts = res.result.msg_opts
        })
      }
    }
  }
</script>

<style scoped>
  .l-work-item{
    padding: 10px 20px;
    height: 100px;
    color: #fff;
  }
  .l-work-item.border {
    border: 1px solid #eee;
    color: rgba(0, 0, 0, 0.65);
  }
  .l-work-item .title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .undone {
    background: #1890ff;
  }
  .done {
    background: #88b665;
  }
  .cursor {
    cursor: pointer;
  }
  .font50 {
    font-size: 50px;
    margin-bottom:10px;
    color: #1890ff;
  }
  .font40 {
    font-size: 30px;
    margin-bottom:10px;
    color: #1890ff;
    font-weight: bold;
  }
  .l-work-button-group button {
    margin-left:10px;
  }
</style>
